<template>
  <div class="example-container">
    <h2>✨ ref() - 基本响应式变量</h2>
    
    <div class="demo-section">
      <h3>魔法文字变色器</h3>
      <h1 :style="{ color: currentColor }" class="magic-text">我是变色魔法文字！</h1>
      <button @click="changeColor" class="color-button">变变变！</button>
      <p class="hint">点击按钮，文字颜色会变化！</p>
    </div>
    
    <div class="demo-section">
      <h3>计数器示例</h3>
      <p class="count-display">当前计数: {{ count }}</p>
      <button @click="increment" class="action-button">+1</button>
      <button @click="decrement" class="action-button">-1</button>
    </div>
    
    <div class="code-section">
      <h3>📝 代码说明</h3>
      <p><strong>ref()</strong> 是最基本的创建响应式变量的方法，适用于任何类型的数据。</p>
      <p>在脚本中需要通过 <code>.value</code> 来访问和修改值，但在模板中可以直接使用。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 定义ref响应式变量
const count = ref<number>(0);

// 颜色数组
const colors = ['#ff6b6b', '#48dbfb', '#1dd1a1', '#feca57', '#ff9ff3', '#54a0ff'];
const colorIndex = ref<number>(0);

// 通过计算获取当前颜色
const currentColor = computed(() => colors[colorIndex.value]);

// 增加计数
const increment = () => {
  count.value++;
};

// 减少计数
const decrement = () => {
  count.value--;
};

// 改变颜色
const changeColor = () => {
  colorIndex.value = (colorIndex.value + 1) % colors.length;
};
</script>

<style scoped>
.example-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.magic-text {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  margin: 30px 0;
  transition: color 0.5s ease;
}

.color-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 30px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.color-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.hint {
  text-align: center;
  margin-top: 15px;
  color: #666;
  font-style: italic;
}

.count-display {
  font-size: 48px;
  text-align: center;
  font-weight: bold;
  color: #4285f4;
  margin: 30px 0;
}

.action-button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s ease;
}

.action-button:nth-child(2) {
  background-color: #f44336;
}

.action-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.code-section {
  background-color: #f0f4f8;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #4285f4;
}

.code-section h3 {
  color: #333;
  margin-top: 0;
}

.code-section p {
  line-height: 1.6;
  color: #555;
}

.code-section code {
  background-color: #e8eaed;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  color: #d32f2f;
}
</style>